<%--
  Created by IntelliJ IDEA.
  User: laoyu
  Date: 2019/8/30
  Time: 9:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form action="/userlist1.html">
                <div class="col-md-8">
                    <label for="userName">用户名：</label>
                    <input type="text" id="userName" name="userName">
                    <label for="userRole">用户角色：</label>
                    <select id="userRole" name="userRole">
                        <option value="0">--请选择--</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <input type="submit" class="btn btn-success" value="查询">
                </div>
                <div class="col-md-4">
                    <a class="btn btn-danger" href="/add.html">添加+</a>
                </div>
            </form>
        </div>
    </div>
    <hr>
    <div class="row clearfix">
        <div class="col-md-8 column">
            <table class="table">
                <thead>
                <tr>
                    <th>用户编码</th>
                    <th>用户名称</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>用户角色</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${userList}" var="u">
                    <tr>
                        <td>${u.userCode}</td>
                        <td>${u.userName}</td>
                        <td>${u.gender}</td>
                        <td>${u.age}</td>
                        <td>${u.phone}</td>
                        <td>${u.userRole}</td>
                        <td><a href="javascript:;" class="viewUser" userId=${u.id }>查看</a>&emsp;
                            <a href="/edituser.do?userId=${u.id}">修改</a>&emsp;
                            <a href="/del.html/${u.id}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="col-md-4 column">
            <div class="providerAdd" role="form">
                <div class="form-group">
                    <label for="v-userCode">用户编码</label>
                    <input type="text" class="form-control" id="v-userCode" name="userCode" value=""/>
                </div>
                <div class="form-group">
                    <label for="v-userName">用户名称</label>
                    <input type="text" class="form-control" id="v-userName" name="userName" value=""/>
                </div>
                <div class="form-group">
                    <label for="v-gender">性别</label>
                    <input type="text" class="form-control" id="v-gender" name="gender" value=""/>
                </div>
                <div class="form-group">
                    <label for="v-birthday">出生日期</label>
                    <input type="text" class="form-control" id="v-birthday" name="birthday" value=""/>
                </div>
                <div class="form-group">
                    <label for="v-phone">电话</label>
                    <input type="text" class="form-control" id="v-phone" name="phone" value=""/>
                </div>
                <div class="form-group">
                    <label for="v-userRole">用户角色</label>
                    <input type="text" class="form-control" id="v-userRole" name="userRole" value=""/>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script>
    //点击“查看”触发点击事件，异步执行“根据ID查看用户”的方法
    $(".viewUser").on("click", function () {
        var obj = $(this);
        $.ajax({
            type: "get",
            url: "/t/user.json",
            data: {id: obj.attr("userId")},
            dataType: "json",
            success: function (result) {
                if ("failed" == result) {
                    alert("操作超时！");
                }
                else if ("nodata" == result) {
                    alert("没有数据！");
                }
                else {
                    $("#v-userCode").val(result.userCode);
                    $("#v-userName").val(result.userName);
                    if (result.gender == 1)
                        $("#v-gender").val("女");
                    else if (result.gender == 0)
                        $("#v-gender").val("男");
                    $("#v-phone").val(result.phone);
                    $("#v-birthday").val(result.birthday);
                    $("#v-userRole").val(result.userRole);
                }
            },
            error: function (data) {
                alert("error");
            }
        });
    });




</script>
</body>
</html>
